<script type="text/javascript">
    $(document).ready(function () {
        //var theme = getDemoTheme();
        var theme = 'custom';
        var editrow = 1;
        var isEdit =false;
        var getAdapter = function () {
            // prepare the data
            var data =  <?php echo $view_data; ?>;
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
					{ name: 'id_kontraktor', type: 'string' },
                    { name: 'nama', type: 'string' },
                    { name: 'alamat', type: 'string' },
                    { name: 'telp_rmh', type: 'string' },
                    { name: 'hp', type: 'string' },
                    { name: 'e_mail', type: 'string' },
                    { name: 'dt_stamp', type: 'date' },
                    { name: 'update_id', type: 'string' }
                 ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failed.
                commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            return dataAdapter;
        }
      
        //createElements(theme);
        
        // initialize the input/Edit fields in FORM.
        $("#idKontraktor").addClass('jqx-input');
        $("#namaKontraktor").addClass('jqx-input');
        $("#Alamat").addClass('jqx-input');
        $("#telpRumah").addClass('jqx-input');
        $("#noHP").addClass('jqx-input');
        $("#eMail").addClass('jqx-input');
        $("#dtStamp").addClass('jqx-input');
        $("#updateID").addClass('jqx-input');
		
        $("#idKontraktor").addClass('jqx-rc-all');
        $("#namaKontraktor").addClass('jqx-rc-all');
        $("#Alamat").addClass('jqx-rc-all');
        $("#telpRumah").addClass('jqx-rc-all');
        $("#noHP").addClass('jqx-rc-all');
        $("#eMail").addClass('jqx-rc-all');
        $("#dtStamp").addClass('jqx-rc-all');
        $("#updateID").addClass('jqx-rc-all');

        $("#idKontraktor").width(400);
        $("#idKontraktor").height(25);
        $("#namaKontraktor").width(400);
        $("#namaKontraktor").height(25);
        $("#Alamat").width(400);
        $("#Alamat").height(50);
		$("#telpRumah").width(400);
        $("#telpRumah").height(25);
		$("#noHP").width(400);
        $("#noHP").height(25);
		$("#eMail").width(400);
        $("#eMail").height(25);
		$("#dtStamp").width(400);
        $("#dtStamp").height(25);
		$("#updateID").width(400);
        $("#updateID").height(25);
		
        if (theme.length > 0) {
            $("#idKontraktor").addClass('jqx-input-' + theme);
            $("#namaKontraktor").addClass('jqx-input-' + theme);
            $("#Alamat").addClass('jqx-input-' + theme);
            $("#telpRumah").addClass('jqx-input-' + theme);
            $("#noHP").addClass('jqx-input-' + theme);
            $("#eMail").addClass('jqx-input-' + theme);
            $("#dtStamp").addClass('jqx-input-' + theme);
            $("#updateID").addClass('jqx-input-' + theme);
			
            $("#idKontraktor").addClass('jqx-rc-all-' + theme);
            $("#namaKontraktor").addClass('jqx-rc-all-' + theme);
            $("#Alamat").addClass('jqx-rc-all-' + theme);
            $("#telpRumah").addClass('jqx-rc-all-' + theme);
            $("#noHP").addClass('jqx-rc-all-' + theme);
            $("#eMail").addClass('jqx-rc-all-' + theme);
            $("#dtStamp").addClass('jqx-rc-all-' + theme);
            $("#updateID").addClass('jqx-rc-all-' + theme);
         }
        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: $(window).width()-40,
            height: $(window).height(),
            source: getAdapter(),
            theme: theme,
            showstatusbar: true,
            sortable: true,
            pageable: true,
            autoheight: true,
            columnsresize: true,
            showfilterrow: true,
            filterable: true,
            pagesize: 15, 
            pagesizeoptions: ['15', '20', '50'],
            renderstatusbar: function (statusbar) {
                // appends buttons to the status bar.
                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
                var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                container.append(addButton);
                container.append(editButton);
                container.append(deleteButton);
                container.append(reloadButton);
                statusbar.append(container);
                addButton.jqxButton({ theme: theme, width: 65, height: 20 });
                editButton.jqxButton({ theme: theme, width: 65, height: 20 });
                deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
                reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
                // add new row.
                addButton.click(function (event) {
                	editrow = 1;
                	isEdit=false;
                    $("#idKontraktor").jqxInput({disabled: false });
                    $("#idKontraktor").val('');
                    $("#namaKontraktor").val('');
                    $("#Alamat").val('');
                    $("#telpRumah").val('');
                    $("#noHP").val('');
                    $("#eMail").val('');
                    $("#dtStamp").val('');
                    $("#updateID").val('');
					
                    var offset = $("#jqxgrid").offset();
                    var data=new Array();
                    $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                    // show the popup window.
                    $("#jqxCUForm").jqxWindow('show');
                       
                });
                editButton.click(function (event) {
                	var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                	var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                	if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                         var idKontraktor = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                         editrow = selectedrowindex;
                         isEdit=true;
                         var offset = $("#jqxgrid").offset();
                         $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                         $("#idKontraktor").val(dataRecord.id_kontraktor);
                         $("#namaKontraktor").val(dataRecord.nama);
                         $("#Alamat").val(dataRecord.alamat);
                         $("#telpRumah").val(dataRecord.telp_rmh);
                         $("#noHP").val(dataRecord.hp);
                         $("#eMail").val(dataRecord.e_mail);
                         $("#dtStamp").val(dataRecord.dt_stamp);
                         $("#updateID").val(dataRecord.update_id);
						 
                         $("#idKontraktor").jqxInput({disabled: true });
                         $("#dtStamp").jqxInput({disabled: true });
                         $("#updateID").jqxInput({disabled: true });
                         $("#jqxCUForm").jqxWindow('show');
                         
                    }
                });
               

             // initialize the popup window and buttons Close.
                $("#jqxCUForm").jqxWindow({ width:600, height:340,resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.3 });
                $("#Close").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Close").click(function () {
                  	 $.ajax({
							url : "<?php echo site_url('kontraktor_ctrl/Refresh')?>",
							type : 'POST',
							success: function(html){
								 $("#content_body").html(html);
							}
					  });
                  	 $("#jqxCUForm").jqxWindow('hide');
                });
                
			 //Simpan dan Edit Data
                $("#Save").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Save").click(function () {
                	if (isEdit) {
						//prepare untuk Edit Data
                		 if (editrow >= 0) {
                             var row = { id_kontraktor: $("#idKontraktor").val(), nama: $("#namaKontraktor").val(), alamat: $("#Alamat").val(), telp_rmh: $("#telpRumah").val(), hp: $("#noHP").val(), e_mail: $("#eMail").val(), dt_stamp: $("#dtStamp").val(), update_id: $("#updateID").val() };
								$('#jqxgrid').jqxGrid('updaterow', editrow, row);                        
                             var form_data1 = {
     								 action:'E',
                                     id_kontraktor: $('#idKontraktor').val(),
                                     nama: $('#namaKontraktor').val(),
                                     alamat: $('#Alamat').val(),
                                     telp_rmh: $('#telpRumah').val(),
                                     hp: $('#noHP').val(),
                                     e_mail: $('#eMail').val(),
									 dt_stamp: $('#dtStamp').val(),
                                     update_id: $('#updateID').val(),
                                     ajax:1
                              };
								
     						  $.ajax({
     								url : "<?php echo site_url('kontraktor_ctrl/Edit')?>",
     								type : 'POST',
     								data : form_data1,
     								success: function(html){		
     									$("#jqxCUForm").jqxWindow('hide');
     								//alert(data);	
    								}
     						  });
                           }
                    } else {
						//prepare untuk Add/Save Data
                    	var row = { id_kontraktor: $("#idKontraktor").val(), nama: $("#namaKontraktor").val(), alamat: $("#Alamat").val(), telp_rmh: $("#telpRumah").val(), hp: $("#noHP").val(), e_mail: $("#eMail").val(), dt_stamp: $("#dtStamp").val(), update_id: $("#updateID").val() };                           
							 $('#jqxgrid').jqxGrid('updaterow', editrow, row);                        
							 var form_data = {
									 action:'A',
									 id_kontraktor: $('#idKontraktor').val(),
									 nama: $('#namaKontraktor').val(),
									 alamat: $('#Alamat').val(),
									 telp_rmh: $('#telpRumah').val(),
									 hp: $('#noHP').val(),
									 e_mail: $('#eMail').val(),
									 dt_stamp: $('#dtStamp').val(),
									 update_id: $('#updateID').val(),
									 ajax:1
							  };
		
						  $.ajax({
								url : "<?php echo site_url('kontraktor_ctrl/Save')?>",
								type : 'POST',
								data : form_data,
								success: function(){
									//$('#show').html(msg),
									$('#idKontraktor').val(''),
		                            $('#namaKontraktor').val(''),
		                            $('#Alamat').val(''),
		                            $('#telpRumah').val(''),
		                            $('#noHP').val(''),
		                            $('#eMail').val(''),
		                            $('#dtStamp').val(''),
		                            $('#updateID').val(''),
		                            $('#idKontraktor').focus();
		                            //  createElements(theme);
                                    //$("#jqxWidgetDialog").css('visibility', 'visible');
		                            //$('#eventWindow').jqxWindow('open');
								}
						  });

	                  }
                      
                });
                
                // delete selected row.
                 deleteButton.click(function (event) {
                    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
					
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                     if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        var idKontraktor = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                        
						$("#jqxgrid").jqxGrid('deleterow', idKontraktor);
           
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
                    	var id= dataRecord.idKontraktor;
						alert(dataRecord);
                        var form_data = {
                                idKont: id
                        }; 
						$.ajax({
							url : "<?php echo site_url('kontraktor_ctrl/Delete')?>",
							type : 'POST',
							data : form_data,
							success: function(html){
								$("#content_body").html(html);
							}
					  });   
					  
                    }
                }); 
								
                // reload grid data.
                 reloadButton.click(function (event) {
                	$("#jqxgrid").jqxGrid('clearfilters');
                	  $.ajax({
							url : "<?php echo site_url('kontraktor_ctrl/Refresh')?>",
							type : 'POST',
						    success: function(html){
						    	 $("#content_body").html(html);
							}
					  }); 
                });
                            
            },
			
			//initialize fields to display datagrid
            columns: [
               { text: 'Kode Kontraktor', datafield: 'id_kontraktor', width: 120 },
               { text: 'Nama Kontraktor', datafield: 'nama', width: 250, cellsalign: 'left', cellsformat: 'n2' },
               { text: 'Alamat Kontraktor', datafield: 'alamat', width: 270, cellsalign: 'left', cellsformat: 'n2' },
			   { text: 'No. Telpon', datafield: 'telp_rmh', width: 120 },
			   { text: 'Nomor HP', datafield: 'hp', width: 120 },
			   { text: 'e Mail', datafield: 'e_mail', width: 230, cellsalign: 'left', cellsformat: 'n2' },
			   { text: 'Date Stamp', datafield: 'dt_stamp', width: 200 },
			   { text: 'Update ID', datafield: 'update_id', width: 90 }
            ]

            
        });

        $('#events').jqxPanel({ width:  $(window).width()-40, height: 50, theme: theme });
        $("#jqxgrid").on("pagechanged", function (event) {
            $("#eventslog").css('display', 'block');
            if ($("#events").find('.logged').length >= 5) {
                $("#events").jqxPanel('clearcontent');
            }
            var args = event.args;
            var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });
        $("#jqxgrid").on("pagesizechanged", function (event) {
            $("#eventslog").css('display', 'block');
            $("#events").jqxPanel('clearcontent');
            var args = event.args;
            var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.          
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });

        
    });

    function createElements(theme) {
        $('#eventWindow').jqxWindow({ maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3,
            okButton: $('#ok'),
            initContent: function () {
                $('#ok').jqxButton({ theme: theme, width: '65px' });
                $('#ok').focus();
            }
        });
       // $('#events').jqxPanel({ theme: theme, height: '250px', width: '450px' });
      
    }
    
</script>

 <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; ">
	 <div id="jqxgrid">  </div>
	 <div style="margin-top: 30px;">
	         <div id="cellbegineditevent"></div>
	         <div style="margin-top: 10px;" id="cellendeditevent"></div>
	 </div>
	
	   <form class="form" id="jqxCUForm"  style="font-size: 13px; font-family: Verdana; width: 1000px; height : 700px;">
		   <div>
		        Add/Edit Product 
		   </div>
		   <div style="overflow: hidden;">
			   <table border="0">
			        <tr>
			            <td align="left">Kode Kontraktor </td>
			            <td align="left"><input id="idKontraktor" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Nama Kontraktor</td>
			            <td align="left"><input id="namaKontraktor" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Alamat Kontraktor </td>
			            <td align="left"><input id="Alamat" /></td>
			        </tr>
					<tr>
			        	<td align="left">Nomor Telpon </td>
			            <td align="left"><input id="telpRumah" /></td>
			        </tr>
					<tr>
			        	<td align="left">No. Handphone </td>
			            <td align="left"><input id="noHP" /></td>
			        </tr>
					<tr>
			        	<td align="left">e-Mail </td>
			            <td align="left"><input id="eMail" /></td>
			        </tr>
					<tr>
			        	<td align="left">Date Stamp </td>
			            <td align="left"><input id="dtStamp" /></td>
			        </tr>
					<tr>
			        	<td align="left">Update ID </td>
			            <td align="left"><input id="updateID" /></td>
			        </tr>
			        <tr>
			        	<td></td>
						<td align="right"><input type="button" id="Save" value="Save"/> 
						<input type="button" id="Close" value="Close"/></td>      
			
					</tr>
			   </table>
	       </div>    
		</form>
	
	
	
		<div style="visibility: hidden;" id="jqxWidgetDialog">
         <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;"
            id="mainDialogContainer">

            <div id="eventWindow">
                <div>
                   <!-- <img width="14" height="14" src="../../images/help.png" alt="" /> -->
                    Property Management</div>
                <div>
                    <div>
                        Save Data Successfully
                    </div>
                    <div>
	                    <div style="float: right; margin-top: 15px;">
	                        <input type="button" id="ok" value="OK" style="margin-right: 10px" />
	                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
	
</div>

